<template>
	 <view class="TutorStatusCards" v-for="(item,index) in list" :key="index"> 
		<view class="card item">
			<view class="top">
				<view style="display: flex;align-items: center;">
					 <tui-icon margin="4rpx" size="20" color="#c06c58"   name="order"></tui-icon>
					<view style="color: #d46c4b;display: flex;align-items: center">
						 <text>订单金额：</text>
						 <text style="font-size: 36rpx;">￥{{item.actualAmount}}</text>
					</view>
				</view>
				<text class="invite">待确认</text>
			</view>
			 <view class="content">
				<view class="content_lt">
					 <image class="image" :src="ossUrl+item.avatar"></image>
				</view>
				<view class="content_rt"> 
					 <text class="tp_lt">{{item.appellation}}</text>  
					<view class="ct">
						<view><text class="ct_tp">邀约类型：{{item.reserveType}}</text></view>
						<view><text class="ct_c">邀约地址：{{item.inviteMerchant&&item.inviteMerchant.address}}</text></view>
						<view><text class="ct_bt">客户备注：无</text> </view>
					</view>
				</view> 
			 </view>
			 <view class="bottom">
			 	<text>预约时间：{{item.reserveDate}} {{item.reserveBeginTime}}-{{item.reserveEndTime}}</text> 
			 </view>
			 <view class="footer"> 
			 <text class="footer_lt"></text>
			 	<view class="button_item">
					<tui-form-button @click="rejectClick(item)" width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">拒绝</tui-form-button>
					<tui-form-button @click="receiveClick(item)" width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">接受邀约</tui-form-button>
				</view>
			 </view>
		</view>
	 </view>
</template>

<script>
	export default {
		emits: ['tapReceive','tapReject'],
		name: 'inviteOrderItem', 
		props: { 
			list:{
				type: Array,
				default:[]
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
			
		},
		data() {
			return {
				 
			};
		},
		methods: { 
			  receiveClick(item){
				this.$emit('tapReceive',item)  
			  },
			  rejectClick(item){
				  	this.$emit('tapReject',item)  
			  }
		}
	};
</script>

<style  lang="scss" scoped>
	.TutorStatusCards{
		padding-top:30rpx;
		.item{
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(214,214,214,0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
		.card{
			background-color: #fff;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;
				.invite{
					color: #ed6e5e;
				}
			}
			.content{
				 padding: 20rpx;
				 display: flex;
				.content_lt{
					width: 160rpx;
					height: 160rpx;
					overflow: hidden; /* 防止图片溢出 */ 
					border-radius: 20rpx;
					.image{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.content_rt{
					width: calc(100% - 160rpx);
					padding-left: 20rpx;
					.tp_lt{
						font-weight: 600;
						font-size: 36rpx;
					}
					.ct{ 
						padding: 16rpx 0;
					    font-size: 24rpx;
						 
					}
					.bt{
						color: #777777;
						font-size: 28rpx;
					}
				}
				 
			}
			.bottom{ 
				color: #b0b1b1; 
				font-size: 24rpx; 
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;
				.total{
					color: #646464;
					display: flex;
					align-items: center;
				}
				.totalPrice{
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}
			.footer{
				 display: flex;
				 align-items: center;
				 justify-content: space-between;
				 
			    padding: 20rpx;
				.button_item{
					display: flex;
					align-items: center; 
					justify-content: space-between;
					width: 55%;
				}
				.footer_lt{
					font-size: 24rpx;
					color: #e9b87a;
				}
			}
		}
	}
</style>